<!--/**
* 首页底边框*
*
* @author LWG
* @date 2022/7/19 14:55
* @since 1.0.0
*/-->
<template>
  <div>
    <!-- 预留插槽 -->
    <router-view />

    <!-- 底部导航栏 -->
    <!-- 图片动态更新有两种方法，其中优雅方式为require(),另一种为v-if方法实现 -->
    <!-- vant 自定义图标写法 -->
    <van-tabbar v-model="active" :placeholder="true">
      <van-tabbar-item name="share">
        <span>分享</span>
        <template #icon="props">
          <img :src="props.active ? icon.active1 : icon.inactive1" />
        </template>
      </van-tabbar-item>

      <van-tabbar-item name="help">
        <span>求助</span>
        <template #icon="props">
          <img :src="props.active ? icon.active2 : icon.inactive2" />
        </template>
      </van-tabbar-item>

      <van-tabbar-item name="home">
        <span>首页</span>
        <template #icon="props">
          <img :src="props.active ? icon.active3 : icon.inactive3" />
        </template>
      </van-tabbar-item>

      <van-tabbar-item name="news">
        <span>消息</span>
        <template #icon="props">
          <img :src="props.active ? icon.active4 : icon.inactive4" />
        </template>
      </van-tabbar-item>

      <van-tabbar-item name="my">
        <span>我的</span>
        <template #icon="props">
          <img :src="props.active ? icon.active5 : icon.inactive5" />
        </template>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
export default {
  data() {
    return {
      //默认选中项应是当前路径的末尾单词 /home/index  /home/me
      //在此处应该截取当前路径末尾的单词，为tabSelected赋值,设置默认选中项
      active: this.$route.path.split("/").slice(2, 3).pop(),

      // 图标
      icon: {
        // 每一个图标都绑定点击和不点击的区别，写成这样因为我写成一条代码写不对
        active1: require(`../assets/tabbar/sharecolor.png`),
        inactive1: require(`../assets/tabbar/share.png`),
        active2: require(`../assets/tabbar/helpcolor.png`),
        inactive2: require(`../assets/tabbar/help.png`),
        active3: require(`../assets/tabbar/home.png`),
        inactive3: require(`../assets/tabbar/home.png`),
        active4: require(`../assets/tabbar/newscolor.png`),
        inactive4: require(`../assets/tabbar/news.png`),
        active5: require(`../assets/tabbar/mycolor.png`),
        inactive5: require(`../assets/tabbar/my.png`),
      },
    };
  },

  // 监听器
  watch: {
    active(newValue, oldValue) {
      console.log(this.$route.path.split("/").slice(2, 3).pop());
      console.log(newValue);
      //如果id名称与路由地址相同可使用以下方法,但是不安全
      // this.$router.push(`/home/${newValue}`);
      // 以下为if....else..判断方法
      if (newValue == "share") {
        this.$router.push("/homeview/share/sharepage");
      } else if (newValue == "help") {
        this.$router.push("/homeview/help/helppage");
      } else if (newValue == "home") {
        this.$router.push("/homeview/indexView");
      } else if (newValue == "news") {
        this.$router.push("/homeview/message/messagePage");
      } else if (newValue == "my") {
        this.$router.push("/homeview/my/mypage");
      }
    },
  },
};
</script>

<style>
</style>
